<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>

<div class="box"></div>

<script>

    var div = document.querySelector('div');
    div.onclick = function () {
        // element.style: JS修改 style样式操作, 产生的是行内样式, CSS权重比较高
        // div.style里面的属性, 采取驼峰命名法
        this.style.backgroundColor = 'skyblue';
        this.style.width = '300px';

        // element.className 类名样式操作     | 没有试出来结果
        // this.className.box.height = '180px';
    }

</script>
</body>
</html>
